<template>
  <div>
    <button class="btn1" @click="fn1">滚动</button>
    <button class="btn2" @click="fn2">暂停</button>
    <h1>
      {{ word }}
    </h1>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      word: "凹凸凹凸凹凸凹凸",
      timer: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn1() {
      if (this.timer !== null) return;
      this.timer = setInterval(() => {
        const header = this.word.slice(0, 1);
        const body = this.word.slice(1);
        this.word = body + header;
      }, 250);
    },
    fn2 (){
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style scoped>
button {
  width: 100px;
  height: 50px;
}
</style>
